<template>
	<text>
		<text :class="{light:item.l}" v-for="(item,index) in txtArr" :key="index">{{item.t}}</text>
	</text>
</template>

<script>
	export default {
		name:"lightText",
		props:{
			word:'',
			char:''
		},
		computed:{
			txtArr(){
				const arr = this.word.split(this.char)
				return arr.reduce((res,n)=>{
					res.push({
						t:n,
						l:false
					},{
						t:this.char,
						l:true
					})
					return res
				},[]).slice(0,-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.light{
		color:#2979ff
	}
</style>